<template>
  <div class="content_box">
    <form class="condition_query">
      <span class="txt">设备来源</span>
      <el-select class="inline-input" size="medium" v-model="deviceSource" clearable placeholder="请选择">
        <el-option
          v-for="item in deviceSourceList"
          :key="item.value"
          :label="item.label"
          :value="item.label">
        </el-option>
      </el-select>

      <span class="txt">标段</span>
      <el-select class="inline-input" size="medium" v-model="bidSection" clearable placeholder="请选择">
        <el-option
          v-for="item in biaoduanList"
          :key="item.id"
          :label="item.name"
          :value="item.name">
        </el-option>
      </el-select>

      <span class="txt">设备类型</span>
      <el-select class="inline-input" size="medium" v-model="deviceType" clearable placeholder="请选择">
        <el-option
          v-for="item in deviceTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <span class="txt">进场编号</span>
      <el-input v-model="mobilizationSerialNumber" size="medium" clearable style="width: 190px; margin-right: 22px;" placeholder="请输入"></el-input>

      <el-button type="primary" size="medium" icon="el-icon-search" style="margin-left:40px" @click="queryListData">查询</el-button>
    </form>

    <div>
      <el-table
        :data="deviceList"
        :height="tableHeight1"
        size="small"
        style="width: 100%;"
        highlight-current-row
        @current-change="handleCurrentChange"
        v-loading="loadingOne">
        <el-table-column type="index" label="No" :index="indexMethod"></el-table-column>
        <el-table-column prop="mobilizationSerialNumber" label="进场编号"></el-table-column>
        <el-table-column prop="bidSection" label="标段"></el-table-column>
        <el-table-column prop="deviceTypeName" label="设备类型"></el-table-column>
        <el-table-column prop="model" label="设备规格"></el-table-column>
        <el-table-column prop="deviceSource" label="设备来源"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click.stop="delDeviceInfo(scope.row)">删除</el-button>
            </template>
          </el-table-column>
      </el-table>
      <Pagination class="page-wrap" :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData"></Pagination>
    </div>

    <div>
      <div style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
        <span>检定记录</span>
        <el-button type="primary" size="small" @click.stop="showRecordModel">添加检定记录</el-button>
      </div>
      <el-table
        :data="pointList"
        :height="tableHeight2"
        size="small"
        style="width: 100%;"
        v-loading="loadingTwo">
        <el-table-column type="index" label="No" :index="indexMethod"></el-table-column>
        <el-table-column prop="verificationTime" label="检定时间"></el-table-column>
        <el-table-column prop="verificationUnit" label="检定单位"></el-table-column>
        <el-table-column prop="verificationResult" label="检定结果"></el-table-column>
        <el-table-column prop="certificateCode" label="证书编码"></el-table-column>
        <el-table-column prop="opinion" label="检定意见"></el-table-column>
        <el-table-column prop="nextVerificationTime" label="下次检定时间"></el-table-column>
        <el-table-column prop="registrant" label="登记人"></el-table-column>
        <el-table-column prop="registrationTime" label="登记时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="modifyPointInfo(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="delPointInfo(scope.row)">删除</el-button>
            <el-button type="text" size="small" @click="pointDetails(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination class="page-wrap" :pageData="page" @pageNum="pageNumData" @pageSize="pageSizeData"></Pagination>
    </div>

    <el-dialog :title="pointTitle" :visible.sync="dialogVisible" width="900px">
      <div style="display: flex; justify-content: center;">
        <div class="left-wrap">
          <div class="info-modal" v-show="!form.verificationRecordId">
            <span class="text">进场编号：</span>
            <el-select v-model="deviceListId" style="width: 260px;" size="medium" placeholder="请选择">
              <el-option
                v-for="item in deviceList"
                :key="item.id"
                :label="item.mobilizationSerialNumber"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="info-modal">
            <span class="text">检定时间：</span>
            <el-date-picker
              style="width: 260px;"
              size="medium"
              v-model="form.verificationTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div class="info-modal">
            <span class="text">检定单位：</span>
            <el-input style="width: 260px;" size="medium" placeholder="请输入" v-model.trim="form.verificationUnit"></el-input>
          </div>
          <div class="info-modal">
            <span class="text">检定结果：</span>
            <el-input style="width: 260px;" size="medium" placeholder="请输入" v-model.trim="form.verificationResult"></el-input>
          </div>
          <div class="info-modal">
            <span class="text">证书编码：</span>
            <el-input style="width: 260px;" size="medium" placeholder="请输入" v-model.trim="form.certificateCode"></el-input>
          </div>
        </div>

        <div class="right-wrap">
          <div class="info-modal">
            <span class="text">下次检定时间：</span>
            <el-date-picker
              style="width: 260px;"
              size="medium"
              v-model="form.nextVerificationTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div class="info-modal">
            <span class="text">登记人：</span>
            <el-input style="width: 260px;" size="medium" placeholder="请输入" v-model.trim="form.registrant"></el-input>
          </div>
          <div class="info-modal">
            <span class="text">登记时间：</span>
            <el-date-picker
              style="width: 260px;"
              size="medium"
              v-model="form.registrationTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div class="info-modal textarea-wrap">
            <span class="text">检定意见：</span>
            <el-input
              type="textarea"
              class="textarea"
              :rows="3"
              placeholder="请输入内容"
              maxlength="100"
              show-word-limit
              v-model="form.opinion">
            </el-input>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="addCheckRecord">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../Pagination";
import HttpInterface from "../../../util/httpInterface";
import eventBus from "../../../util/eventBus";
import Constants from "../../../util/constants";
import { mapState } from "vuex";

export default {
	name: "DeviceListData",
  components: {
    Pagination
  },
  data() {
    return {
      pointTitle: "添加检定记录",
      dialogVisible: false,
      loadingOne: false,
      loadingTwo: false,
      deviceList: [],
      pointList: [],
      tableHeight1: 0,
      tableHeight2: 0,
      deviceListId: "",
      mobilizationSerialNumber: "",
      deviceSourceList: [
        { value: '1', label: '自有' },
        { value: '2', label: '租凭' },
      ],
      deviceTypeList: [
        { value: '1-1', label: '一般设备' },
        { value: '1-2', label: '主要设备' },
        { value: '1-3', label: '特种设备' },
        { value: '1-4', label: '关键设备' },
      ],
      form: {
        verificationUnit: "",
        verificationTime: "",
        verificationResult: "",
        certificateCode: "",
        nextVerificationTime: "",
        registrant: "",
        registrationTime: "",
        opinion: "",
        id: null
      },
      deviceType: "",
      bidSection: "",
      deviceSource: "",
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      },
      page: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      }
    };
	},

  computed: {
	  ...mapState(["biaoduanList"])
  },

	created() {
    this.getTableHeight();
  },

  mounted() {
    let _this = this;
    let resizeFlag = null;
    window.onresize = () => {
      resizeFlag && clearTimeout(resizeFlag);
      resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        resizeFlag = null;
      }, 120);
    };
  },

  beforeDestroy() {
    window.onresize = null;
  },

  methods: {
    getTableHeight() {
      let num = 156;  // 表格距离窗口顶的top 与 bottom之和
      let tableNum = (window.innerHeight - num) / 2;  // 有两个表格
      this.tableHeight1 = tableNum - 65;  // 第一个表格高一点
      this.tableHeight2 = tableNum - 82;  // 第二个表格低一点
    },

    indexMethod (index) {
      return index + 1;
    },

    pageNumData (page) {
      this.pageData.pageNum = Number(page);
      this.queryListData();
    },

    pageSizeData (page) {
      this.pageData.pageSize = Number(page);
      this.queryListData();
    },

    // 查询数据
    queryListData () {
      this.loadingOne = true;
      this.loadingTwo = false;
      this.pointList = [];
      let _this = this;
      let searchMap = {
        page: this.pageData.pageNum,
        size: this.pageData.pageSize,
        bidSection: this.bidSection,
        mobilizationSerialNumber: this.mobilizationSerialNumber,
        deviceType: this.deviceType,
        deviceSource: this.deviceSource
      };
      HttpInterface.requestPost(this, HttpInterface.URL_VERIFICATION_RECORD_FIND_PAGE, searchMap, function (res) {
        let data = res.data;
        if (data.success) {
          let { rows, total } = data.other;
          rows.forEach(item  => {
            item.deviceTypeName = Constants.DEVICE_TYPE_LIST[item.deviceType]
          })
          _this.deviceList = rows;
          _this.pageData.total = total;
        } else {
          _this.errorMessage("加载失败！");
        }
        _this.loadingOne = false;
      }, function (err) {
        _this.loadingOne = false;
        _this.errorMessage("获取数据失败！");
      }, false)
    },

    // 删除
    delDeviceInfo(row) {
      let _this = this;
      this.$confirm('此操作将永久删除这条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: row.id
        };
        HttpInterface.requestGet(this, HttpInterface.URL_VERIFICATION_RECORD_DELETE, params, function (res) {
          let data = res.data;
          if (data.success) {
            _this.successMessage("删除成功！");
            _this.queryListData();
          } else {
            _this.errorMessage("删除失败！");
          }
        }, null)
      }).catch(() => {});
    },

    // 显示检定记录
    showRecordModel () {
      this.dialogVisible = true;
      this.pointTitle = "添加检定记录";
      this.deviceListId = "";
      this.form = {
        verificationUnit: "",
        verificationTime: "",
        verificationResult: "",
        certificateCode: "",
        nextVerificationTime: "",
        registrant: "",
        registrationTime: "",
        opinion: ""
      };
    },

    // 添加/修改 检定记录
    addCheckRecord() {
      let _this = this;
      let { form, deviceListId } = this;
      let params = {
        verificationRecordId: deviceListId || form.verificationRecordId,
        verificationTime: form.verificationTime,
        nextVerificationTime: form.nextVerificationTime,
        verificationUnit: form.verificationUnit,
        registrant: form.registrant,
        verificationResult: form.verificationResult,
        registrationTime: form.registrationTime,
        certificateCode: form.certificateCode,
        opinion: form.opinion
      };
      if (form.id) {
        params.id = form.id;
      }
      let url = form.id == null ? HttpInterface.URL_VERIFICATION_RECORD_INSERT : HttpInterface.URL_VERIFICATION_RECORD_UPDATE;
      HttpInterface.requestPost(this, url, params, function (res) {
        let data = res.data;
        if (data.success) {
          if (form.id) {
            _this.successMessage('编辑成功！');
          } else {
            _this.successMessage('添加成功！');
          }

          _this.dialogVisible = false;
          _this.queryPointList(_this.id);
        } else {
          if (form.id) {
            _this.errorMessage('编辑失败！');
          } else {
            _this.errorMessage('添加失败！');
          }
        }
      }, null, false)
    },

    // 选中行 加载数据
    handleCurrentChange(val) {
      this.rowData = val;
      this.id = val.id;
      this.queryPointList(val.id);
    },

    // 查询检定记录
    queryPointList(id) {
      this.loadingTwo = true;
      let _this = this;
      let params = {
        page: this.page.pageNum,
        size: this.page.pageSize,
        id: id
      };
      HttpInterface.requestGet(this, HttpInterface.URL_GET_VERIFICATION_RECORD, params, function (res) {
        let { other, success } = res.data;
        if (success) {
          let { rows, total } = other.verificationRecordDetailsPage;
          rows.forEach(item => {
            if (item.nextVerificationTime) {
              item.nextVerificationTime = item.nextVerificationTime.slice(0, 10);
            }
            if (item.registrationTime) {
              item.registrationTime = item.registrationTime.slice(0, 10);
            }
            if (item.verificationTime) {
              item.verificationTime = item.verificationTime.slice(0, 10);
            }
          })
          _this.pointList = rows;
          _this.page.total = total;
        } else {
          _this.errorMessage("加载数据失败！");
        }
        _this.loadingTwo = false;
      }, function (err) {
        _this.loadingTwo = false;
        _this.errorMessage("加载数据失败！");
      })
    },

    // 修改检定记录
    modifyPointInfo(row) {
      this.dialogVisible = true;
      this.pointTitle = "修改检定记录";
      this.form = {
        id: row.id,
        verificationRecordId: row.verificationRecordId,
        verificationTime: row.verificationTime,
        nextVerificationTime: row.nextVerificationTime,
        verificationUnit: row.verificationUnit,
        registrant: row.registrant,
        verificationResult: row.verificationResult,
        registrationTime: row.registrationTime,
        certificateCode: row.certificateCode,
        opinion: row.opinion,
      }
    },

    // 删除检定记录
    delPointInfo(row) {
      let _this = this;
      this.$confirm('此操作将永久删除这条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: row.id
        };
        HttpInterface.requestGet(this, HttpInterface.URL_VERIFICATION_DETAILS_DELETE, params, function (res) {
          let data = res.data;
          if (data.success) {
            _this.successMessage("删除成功！");
            _this.queryPointList(_this.id);
          } else {
            _this.errorMessage("删除失败！");
          }
        }, null)
      }).catch(() => {});
    },

    // 检定记录详情
    pointDetails(row) {
      let data = {
        rowData: this.rowData,
        row: row
      };
      this.$emit('onDetails', data);
    }
  }
};
</script>

<style scoped lang="scss">
  .condition_query{
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .txt{
      margin-right: 10px;
      font-size: 14px;
    }

    .inline-input{
      width: 120px;
      margin-right: 22px;
    }
  }

  .right-wrap{
    .info-modal{
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px 0;

      .text{
        font-size: 14px;
        margin-right: 10px;
        width: 100px;
        display: inline-block;
        text-align: right;
      }

      .textarea{
        width: 260px;
      }
    }

    .textarea-wrap{
      .text{
        margin-top: -40px;
      }
    }
  }

  .left-wrap{
    .info-modal{
      margin: 20px 0;
      margin-right: 30px;

      .text{
        width: 70px;
      }
    }
  }

  .page-wrap{
    margin-top: 10px !important;
  }

  .el-dialog__wrapper >>> .el-dialog .el-dialog__body {
    padding: 6px 20px;
  }

  .el-textarea >>> .el-textarea__inner{
    border-radius: 1px;
  }

  .el-table--small >>> td {
    padding: 6px 0;
  }
</style>
